Allow SegmentedControl labels to wrap without overflow by joshfarrant · Pull Request #8442 · primer/react

joshfarrant · 2026-09-22T10:14:15Z

Closes github/primer#7156

SegmentedControl previously fixed its track to 32px, or 28px at the small size, which allowed multiline labels to escape the track and selected-state treatment. This PR updates the fixed height to min-height so the control grows to its tallest segment.

Changelog

New

Add deterministic multiline Storybook coverage for selected and unselected labels across default and subtle variants, both sizes, icons, counters, and unchanged single-line references.
Add Playwright geometry and accessibility stress coverage for equal segment heights, selected-content sizing, 320px reflow, enlarged text, and WCAG text spacing.
Add an @primer/react patch changeset.

Changed

Preserve the existing 32px and 28px control dimensions as minimum heights, allowing SegmentedControl to grow vertically with wrapped labels.

Removed

None.

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Primer React tests pass, and compatibility also verified in github-ui.

changeset-bot · 2026-09-22T10:14:24Z

🦋 Changeset detected

Latest commit: d7bfaa1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-09-22T10:14:50Z

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

Copilot

Copilot review overview

🟡 Changes recommended

The enlarged-text test can pass despite horizontal overflow because it samples page overflow too early and only checks content height.

Get a fresh assessment by requesting another Copilot review.

Review effort: Balanced
Findings: 1

Open (1)

Stress test misses horizontal overflow after style mutation · New

What changed in this PR

Updates SegmentedControl to grow vertically for wrapped labels while preserving standard minimum heights.

Changes:

Replaces fixed heights with minimum heights.
Adds multiline Storybook and Playwright coverage.
Adds an @primer/react patch changeset.

File	Description
`SegmentedControl.module.css`	Allows vertical growth.
`SegmentedControl.features.stories.tsx`	Adds wrapping scenarios.
`SegmentedControl.features.stories.module.css`	Styles test scenarios.
`SegmentedControl.test.ts`	Adds layout and reflow tests.
`.changeset/segmented-control-wrap-labels.md`	Documents the patch.

💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Restore existing visual baselines and limit wrapping coverage to natural word boundaries. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Keep intrinsic multiline growth without allowing flex parents to stretch single-line controls. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Verify computed wrapping styles and accessory labels remain unclipped and unsplit. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

joshfarrant · 2026-09-23T09:10:50Z

Final github-ui integration assessment for github/github-ui#34664 at 05637c8aa:

Primer Integration Changes, Projects, and VRT all passed.
CI failed only in @github-ui/issue-metadata:test. The original attempt failed two ProjectItemSectionFieldListTanStack cases; a failed-jobs retry reproduced the same settles a confirmed field clear when the response also contains unrelated GraphQL errors failure at line 683.
The same line-683 test already failed in the prior integration run (35755082152), before the final SegmentedControl package.
The strict locator sees both the visible Choose an option value and Choose an option, filter text box and list of items… in the live region. That announcement comes from the FilteredActionList changes introduced on Primer main by SelectPanel: Announce filter input name on initial focus #8413 (d4e30ed18), not from this PR.
This PR's source diff against origin/main contains only SegmentedControl source/stories/tests/snapshots and its changeset. packages/issue-metadata has no SegmentedControl usage, and the downstream VRT/Projects suites are green.

This is a real downstream test incompatibility with an unrelated Primer-main FilteredActionList change, not a SegmentedControl regression. The failed run and retry remain linked for follow-up; applying the repository-standard integration-tests: skipped manually disposition only for #8442. The PR remains draft.

primer-integration · 2026-09-23T11:39:23Z

Integration test results from github/github-ui PR:

Changes Passed
CI Failed
VRT Passed
Projects Passed

CI check runs linting, type checking, and unit tests. Check the workflow logs for specific failures.

Need help? If you believe this failure is unrelated to your changes, please reach out to the Primer team for assistance.

joshfarrant · 2026-09-23T14:17:12Z

Thanks for the review @liuliu-dev!

Heads up that I spotted some VRTs were showing some unintended changes so I've pushed a fix for that. No changes to existing VRTs now, the only VRT change is the addition of the new ones.

Just flagging for you in case you wanted to take another look before I merge

Copilot

Copilot review overview

🟢 Approval recommended

The focused styling fix is well covered across sizes, variants, reflow, and unchanged single-line behavior.

Review effort: Balanced
Findings: None

Resolved since last review (1)

Stress test misses horizontal overflow after style mutation

liuliu-dev · 2026-09-23T16:02:52Z

@joshfarrant thanks for the heads up! Looks great! ✨

github-actions Bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Sep 22, 2026

joshfarrant deployed to github-pages September 22, 2026 10:24 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-8442 September 22, 2026 10:25 Inactive

joshfarrant added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Sep 22, 2026

github-actions Bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Sep 22, 2026

joshfarrant requested a balanced review from Copilot September 22, 2026 13:46

Copilot started reviewing on behalf of joshfarrant September 22, 2026 13:47 View session

primer Bot deployed to github-pages September 22, 2026 13:48 View deployment

github-actions Bot temporarily deployed to storybook-preview-8442 September 22, 2026 13:48 Inactive

Copilot AI reviewed Sep 22, 2026

View reviewed changes

Comment thread e2e/components/SegmentedControl.test.ts Outdated

github-actions Bot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Sep 22, 2026

joshfarrant deployed to github-pages September 22, 2026 15:36 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-8442 September 22, 2026 15:37 Inactive

joshfarrant added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Sep 22, 2026

github-actions Bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Sep 22, 2026

joshfarrant added update snapshots 🤖 Command that updates VRT snapshots on the pull request and removed update snapshots 🤖 Command that updates VRT snapshots on the pull request labels Sep 22, 2026

github-actions Bot temporarily deployed to storybook-preview-8442 September 22, 2026 16:01 Inactive

github-actions Bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Sep 22, 2026

joshfarrant added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Sep 22, 2026

github-actions Bot temporarily deployed to storybook-preview-8442 September 22, 2026 16:12 Inactive

joshfarrant deployed to github-pages September 22, 2026 16:23 — with GitHub Actions View deployment

github-actions Bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Sep 22, 2026

github-actions Bot temporarily deployed to storybook-preview-8442 September 22, 2026 16:23 Inactive

primer Bot deployed to github-pages September 22, 2026 16:31 View deployment

github-actions Bot temporarily deployed to storybook-preview-8442 September 22, 2026 16:31 Inactive

joshfarrant and others added 4 commits September 23, 2026 09:01

test(vrt): update snapshots

384adeb

Scope SegmentedControl wrap sizing

7eb1dbc

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

test(vrt): update snapshots

78a3f30

Correct SegmentedControl multiline coverage

6402b0f

Restore existing visual baselines and limit wrapping coverage to natural word boundaries. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

joshfarrant force-pushed the joshfarrant-fix-segmented-control-wrapping branch from b3d5e7b to 6402b0f Compare September 23, 2026 08:01

github-actions Bot added the integration-tests: failing Changes in this PR cause breaking changes in gh/gh label Sep 23, 2026

joshfarrant added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Sep 23, 2026

joshfarrant deployed to github-pages September 23, 2026 08:13 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-8442 September 23, 2026 08:13 Inactive

github-actions Bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Sep 23, 2026

Preserve SegmentedControl flex geometry

0db2543

Keep intrinsic multiline growth without allowing flex parents to stretch single-line controls. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

joshfarrant force-pushed the joshfarrant-fix-segmented-control-wrapping branch from 41565d8 to 0db2543 Compare September 23, 2026 08:20

joshfarrant added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Sep 23, 2026

github-actions Bot temporarily deployed to storybook-preview-8442 September 23, 2026 08:23 Inactive

test(vrt): update snapshots

d3f252f

github-actions Bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Sep 23, 2026

Assert SegmentedControl word boundaries

d7bfaa1

Verify computed wrapping styles and accessory labels remain unclipped and unsplit. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

github-actions Bot temporarily deployed to storybook-preview-8442 September 23, 2026 08:35 Inactive

joshfarrant deployed to github-pages September 23, 2026 08:45 — with GitHub Actions View deployment

github-actions Bot deployed to storybook-preview-8442 September 23, 2026 08:46 View deployment

joshfarrant added integration-tests: skipped manually Changes in this PR do not require an integration test and removed integration-tests: failing Changes in this PR cause breaking changes in gh/gh labels Sep 23, 2026

joshfarrant marked this pull request as ready for review September 23, 2026 11:39

joshfarrant requested a balanced review from Copilot September 23, 2026 14:14

Copilot started reviewing on behalf of joshfarrant September 23, 2026 14:15 View session

Copilot AI reviewed Sep 23, 2026

View reviewed changes

Navigation Menu

Allow SegmentedControl labels to wrap without overflow - #8442

Allow SegmentedControl labels to wrap without overflow#8442
joshfarrant wants to merge 12 commits into
mainfrom
joshfarrant-fix-segmented-control-wrapping

joshfarrant commented Sep 22, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Sep 22, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 22, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

joshfarrant commented Sep 23, 2026

Uh oh!

primer-integration Bot commented Sep 23, 2026

Uh oh!

joshfarrant commented Sep 23, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

liuliu-dev commented Sep 23, 2026

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

joshfarrant commented Sep 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Uh oh!

changeset-bot Bot commented Sep 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Sep 22, 2026

⚠️ Action required

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟡 Changes recommended

Uh oh!

Uh oh!

joshfarrant commented Sep 23, 2026

Uh oh!

primer-integration Bot commented Sep 23, 2026

Uh oh!

joshfarrant commented Sep 23, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟢 Approval recommended

Uh oh!

liuliu-dev commented Sep 23, 2026

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

joshfarrant commented Sep 22, 2026 •

edited

Loading

changeset-bot Bot commented Sep 22, 2026 •

edited

Loading